<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HelloWorld</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>watch</h1>
    <hr>
    <div id="app">
        <p>今日湿度: {{temp}} 度</p>
        <p>穿衣指数: " {{cloth}} "</p>
        <p>
            <button @click="tempAdd">升高湿度</button>
            <button @click="tempMinus">降低湿度</button>

        </p>
    </div>
    
   
    <script type="text/javascript">
        var clothList = [
            '夹克,长裙',
            'T恤,短袖,齐逼小短裙',
            '棉衣,羽绒服'
        ]


        var app=new Vue({
            el:'#app',
            data:{
                temp:14,
                cloth:clothList[0]
            },
            methods:{
                tempAdd:function(){
                    this.temp+=5;
                },
                tempMinus:function(){
                    this.temp-=5;
                }
               
            }
            //,
            // watch:{
            //         temp:function(newVal,oldVal){
            //             if (newVal >= 26){
            //                 this.cloth=clothList[1]
            //             }else if(newVal <26 && newVal > 0){
            //                     this.cloth=clothList[0]
            //             }else {
            //                     this.cloth=clothList[2]
            //             }
            //         }
            //     }
        })

        app.$watch('temp',function(newVal,oldVal){
            if (newVal >= 26){
                        this.cloth=clothList[1]
                    }else if(newVal <26 && newVal > 0){
                            this.cloth=clothList[0]
                    }else {
                            this.cloth=clothList[2]
                    }
        })
    </script>
  
</body>
</html>